<template>
	<view class="ticket-container">
		<l-painter isCanvasToTempFilePath :hidden="isShowImg" @success="handleSuccess" css="width: 750rpx; padding-top: 32rpx;background: #fff;">
			<l-painter-view css="width: 100%;box-sizing: border-box;border:1px solid #000;">
				<l-painter-view css="text-align:center;">
					<l-painter-text text="准考证"
						css="padding: 10px 0;font-weight: 600;font-size: 36rpx;color: #34314F;line-height: 25px;text-align:center;" />
				</l-painter-view>
				<l-painter-view css="display: flex;justify-content: space-between;">
					<l-painter-view css="width: 100%;">
						<l-painter-view css="display: flex;width: 100%;text-align:center;border-top:1px solid #000;">
							<l-painter-view>
								<l-painter-text text="姓名"
									css="height: 42px;width: 70px;font-size: 26rpx;color: #34314F;line-height: 25px;text-align:center;border-right: 1px solid #000;" />
								<l-painter-text :text="posterData.fullName"
									css="height: 42px;width: 70px;font-size: 26rpx;color: #34314F;line-height: 25px;text-align:center;border-right: 1px solid #000;" />
							</l-painter-view>
							<l-painter-view >
								<l-painter-text text="性别"
									css="height: 42px;width: 70px;font-size: 26rpx;color: #34314F;line-height: 25px;text-align:center;border-right: 1px solid #000;" />
								<l-painter-text :text="posterData.gender === 0 ? '男': '女'"
									css="height: 42px;width: 70px;font-size: 26rpx;color: #34314F;line-height: 25px;text-align:center;" />
							</l-painter-view>
						</l-painter-view>
						
						<l-painter-view>
							<l-painter-view css="border-top:1px solid #000;">
								<l-painter-text text="身份证号"
									css="width: 70px;height: 42px;font-size: 26rpx;color: #34314F;line-height: 25px;text-align:center;border-right: 1px solid #000;" />
								<l-painter-text :text="posterData.idCard"
									css="height: 42px;padding: 0 0 0 12px;font-size: 26rpx;color: #34314F;line-height: 25px;text-align:center;" />
							</l-painter-view>
						</l-painter-view>
						
						<l-painter-view>
							<l-painter-view css="border-top:1px solid #000;">
								<l-painter-text text="准考证号"
									css="height: 42px;width: 70px;height: 44px;font-size: 26rpx;color: #34314F;line-height: 25px;text-align:center;border-right: 1px solid #000;" />
								<l-painter-text :text="posterData.candNumber"
									css="height: 42px;padding: 0 0 0 12px;font-size: 26rpx;color: #34314F;line-height: 25px;text-align:center;" />
							</l-painter-view>
						</l-painter-view>
					</l-painter-view>
					
					<l-painter-view>
						<l-painter-image src="http://101.34.111.187:8085/profile/upload/2025/04/22/9611f73746b84b9b8c205c9d1c8b057d_20250422160640A003.jpg" css="width: 94px; height: 132px"></l-painter-image>
					</l-painter-view>
				</l-painter-view>

				<l-painter-view>
					<l-painter-view css="border-top:1px solid #000;">
						<l-painter-text text="报考单位"
							css="height: 42px;width: 70px;font-size: 26rpx;color: #34314F;line-height: 25px;text-align:center;border-right: 1px solid #000;" />
						<l-painter-text :text="posterData.employer"
							css="height: 42px;padding-left: 12px;font-size: 26rpx;color: #34314F;line-height: 25px;text-align:center;" />
					</l-painter-view>
				</l-painter-view>

				<l-painter-view>
					<l-painter-view  css="border-top:1px solid #000;">
						<l-painter-text text="报考岗位"
							css="height: 42px;width: 70px;font-size: 26rpx;color: #34314F;line-height: 25px;text-align:center;border-right: 1px solid #000;" />
						<l-painter-text :text="posterData.positionName"
							css="height: 42px;padding-left: 12px;font-size: 26rpx;color: #34314F;line-height: 25px;text-align:center;" />
					</l-painter-view>
				</l-painter-view>

				<l-painter-view>
					<l-painter-view  css="border-top:1px solid #000;">
						<l-painter-text text="笔试地点"
							css="height: 42px;width: 70px;font-size: 26rpx;color: #34314F;line-height: 25px;text-align:center;border-right: 1px solid #000;" />
						<l-painter-text :text="posterData.venueAddr"
							css="height: 42px;padding-left: 12px;font-size: 26rpx;color: #34314F;line-height: 25px;text-align:center;" />
					</l-painter-view>
				</l-painter-view>

				<l-painter-view>
					<l-painter-view css="border-top:1px solid #000;">
						<l-painter-text text="笔试日期"
							css="height: 42px;width: 70px;font-size: 26rpx;color: #34314F;line-height: 25px;text-align:center;border-right: 1px solid #000;" />
						<l-painter-text :text="posterData.examTime"
							css="height: 42px;padding-left: 12px;font-size: 26rpx;color: #34314F;line-height: 25px;text-align:center;" />
					</l-painter-view>
				</l-painter-view>
				<l-painter-view>
					<l-painter-view css="display: flex; width: 100%;border-top:1px solid #000;">
						<l-painter-text text="笔试时间"
							css="height: 42px;flex: 1;width: 33%;font-size: 26rpx;color: #34314F;line-height: 25px;text-align:center;border-right: 1px solid #000;" />
						<l-painter-text text="考场号"
							css="height: 42px;flex: 1;width: 33%;font-size: 26rpx;color: #34314F;line-height: 25px;text-align:center;border-right: 1px solid #000;" />
						<l-painter-text text="座位号"
							css="height: 42px;flex: 1;width: 33%;font-size: 26rpx;color: #34314F;line-height: 25px;text-align:center;" />
					</l-painter-view>
				</l-painter-view>
				<l-painter-view>
					<l-painter-view css="display: flex;border-top:1px solid #000;border-bottom:1px solid #000;">
						<l-painter-text :text="examineTime"
							css="height: 42px;flex: 1;font-size: 26rpx;color: #34314F;line-height: 25px;text-align:center;border-right: 1px solid #000;" />
						<l-painter-text :text="posterData.roomName"
							css="height: 42px;flex: 1;font-size: 26rpx;color: #34314F;line-height: 25px;text-align:center;border-right: 1px solid #000;" />
						<l-painter-text :text="posterData.seatNumber"
							css="height: 42px;flex: 1;font-size: 26rpx;color: #34314F;line-height: 25px;text-align:center;" />
					</l-painter-view>
				</l-painter-view>
				
				<l-painter-view css="padding: 20px 12px 20px;">
					<l-painter-text text="考生须知"
						css="display: block;margin-bottom: 10px;font-weight: 600;font-size: 14px;color: #34314F;line-height: 25px;text-align:center;" />
					<l-painter-text :text="posterData.examNotice"
						css="font-weight: 400;font-size: 12px;color: #34314F;line-height: 18px;text-align:left;" />
				</l-painter-view>
				
			</l-painter-view>
		</l-painter>
	</view>
</template>

<script>
	export default {
		props: {
			isShowImg: {
				type: Boolean,
				default: true
			},
			detail: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {
				show: false,
				// json: `<p><span>测试测试</span><img src="/static/logo.png"/></p>`,
				path: '',
				posterData: {}
			}
		},

		watch: {
			detail: {
				handler(newObj, oldObj) {
					if (newObj) {
						this.posterData = newObj
					}
				},
				immediate: true
			}
		},
		computed: {
			examineTime() {
				return this.posterData.startTime + ' - ' + this.posterData.endTime
			}
		},
		mounted() {
			
		},
		methods: {
			handleSuccess(path) {
				this.path = path
			},
			// handleMake() {
			// 	const json = parseHtml(`<p>测试测试</p>`)
			// 	console.log(this.$refs.painter, json, 'mounted')
			// 	this.$refs.painter.render(json)
			// },
			saveImg() {
				let saveImg = this.path.replace(/^data:image\/\w+;base64,/, ""); //去掉data:image/png;base64,
				uni.getFileSystemManager().writeFile({
					filePath: wx.env.USER_DATA_PATH + '/imageName.png',
					data: saveImg,
					encoding: 'base64',
					success: res2 => {
						uni.saveImageToPhotosAlbum({
							filePath: wx.env.USER_DATA_PATH + '/imageName.png',
							success: function(res) {
								//保存成功
								uni.showToast({
									title: '保存成功'
								})
							},
							fail: function(err) {
								//保存失败
								uni.showToast({
									title: '保存失败'
								})
								console.log(err, '保存失败')
							}
						})
					},
					fail: err2 => {
						console.log(err2)
					}
				})
			}
		}
	}
</script>


<style>
</style>